<template>
  <div class="single-sec">
    <div class="item-sec-taglis">
      <ul class="flex-list">
        <li
          v-for="(item, index) in data"
          :key="index"
          :class="{ highlighted: selectedIndex === index }"
          @click="selectItem(index)"
        >
          <div class="tag-item" @click="handleSelectedTag($event,item)">
            <div class="inner-tag-item">{{ item.label }}</div>
            <div class="tangle">
              <van-icon name="success" color="#fff" size="14" />
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      selectedIndex: null,
    };
  },
  methods: {
    handleSelectedTag(e,item){
        this.$emit('selected-tag',item)
    },
    selectItem(index) {
      this.selectedIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.single-sec {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .item-sec-taglis {
    .flex-list {
      display: flex;
      flex-wrap: wrap;
    }
    li {
      //   float: left;
      margin: 0 10px 10px 0;
    }
    .inner-tag-item {
      width: 101px;
      height: 38px;
      background: #f6f6f6;
      font-size: 14px;
      color: #222222;
      line-height: 38px;
      text-align: center;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #efefef;
      overflow: hidden;
    }
    .tangle {
      width: 18px;
      height: 16px;
      background: transparent;
      border-radius: 8px 0px 4px 0px;
      border: 1px solid transparent;
      position: absolute;
      right: 0px;
      bottom: 0px;
      visibility: hidden;
      text-align: center;
      .van-icon-success {
        margin: 2px 0 0 0;
      }
      .inner-tag-item {
        width: 101px;
        height: 38px;
        background: #f7faff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid transparent;
        visibility: hidden;
      }
    }
  }

  .highlighted {
    .tag-item {
      display: inline-block;
      position: relative;
      .inner-tag-item {
        visibility: visible;
        width: 101px;
        height: 38px;
        background: #f7faff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #3875f6;
        color: #3875f6;
      }
      .tangle {
        visibility: visible;
        width: 18px;
        height: 16px;
        background: #3875f6;
        border-radius: 8px 0px 4px 0px;
        border: 1px solid #3875f6;
        position: absolute;
        right: 0px;
        bottom: 0px;
        text-align: center;
        .van-icon-success {
          margin: 2px 0 0 0;
        }
      }
    }
  }
}
</style>
